<script setup lang="ts">
import {ref, watch, computed, onMounted, unref} from 'vue'
import {useAppStore} from '@/store/modules/app'
import {useDesign} from '@/hooks/web/useDesign'

const {getPrefixCls} = useDesign()
const prefixCls = getPrefixCls('logo')
const appStore = useAppStore()
const show = ref(true)
const title = computed(() => appStore.getTitle)
const layout = computed(() => appStore.getLayout)
const collapse = computed(() => appStore.getCollapse)

onMounted(() => {
  if (unref(collapse)) show.value = false
})

watch(
    () => collapse.value,
    (collapse: boolean) => {
      if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
        show.value = true
        return
      }
      if (!collapse) {
        setTimeout(() => {
          show.value = !collapse
        }, 400)
      } else {
        show.value = !collapse
      }
    }
)

watch(
    () => layout.value,
    (layout) => {
      if (layout === 'top' || layout === 'cutMenu') {
        show.value = true
      } else {
        if (unref(collapse)) {
          show.value = false
        } else {
          show.value = true
        }
      }
    }
)

</script>
<template>
  <div>
    <router-link
        :class="[
        prefixCls,
        layout !== 'classic' ? `${prefixCls}__Top` : '',
        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
      ]"
        to="/"
    >
      <img
          src="@/assets/imgs/logo.png"
          style="border-radius: 50%;overflow: hidden"
          class="w-[calc(var(--logo-height)-20px)] h-[calc(var(--logo-height)-20px)]"
      />
      <div
          v-if="show"
          :class="[
          'ml-10px text-15px font-700',
          {
            'text-[var(--logo-title-text-color)]': layout === 'classic',
            'text-[var(--top-header-text-color)]':
              layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
          }
        ]"
      >
        {{ title }}
      </div>
    </router-link>
  </div>
</template>
<style scoped>

.decoration-none {
  justify-content: center;
}

</style>
